<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		
		body {
			background-color: #000000;
			height: 100%;
			margin: 0 auto;
		}
		
		.web {
			width: 1200px;
			margin: 0 auto;
			&::after {
				content: "";
				display: block;
				clear: both;
			}
		}
		
		span {
			color: skyblue;
			width: 3%;
			display: inline-block;
			float: left;
			font-size: 30px;
			height: 200px;
			line-height: 300px;
		}
		
		.my_animation {
			animation-name: lin_fun;
			/*名字和下面对应*/
			animation-duration: 1s;
			/*时间*/
			animation-timing-function: ease-in-out;
			/*方式： 快慢快*/
			/*	animation-delay: 1s;/*(延迟一秒)*/
			animation-fill-mode: forwards;
			/*最终状态*/
			animation-iteration-count: infinite;
			/*(次数)*/
			/*	animation-direction: alternate;/*(倒过来)*/
			/*animation-play-state: paused;/*(暂停)*/
		}
		
		@keyframes lin_fun {
			0% {
				transform: translateY(0)/*偏移*/
			}
			25% {
				transform: translateY(30px);
			}
			50% {
				transform: translateY(0)
			}
			75% {
				transform: translateY(0)
			}
			100% {
				transform: translateY(0)
			}
		}
		
		div span:nth-of-type(1) {
			animation-delay: 0s;
			/*(延迟一秒)*/
		}
		
		div span:nth-of-type(2) {
			animation-delay: .1s;
			/*(延迟一秒)*/
		}
		
		div span:nth-of-type(3) {
			animation-delay: .2s;
			/*(延迟一秒)*/
		}
		
		div span:nth-of-type(4) {
			animation-delay: .3s;
			/*(延迟一秒)*/
		}
		
		div span:nth-of-type(5) {
			animation-delay: .4s;
			/*(延迟一秒)*/
		}
		
		div span:nth-of-type(6) {
			animation-delay: .5s;
			/*(延迟一秒)*/
		}
	</style>

	<div class="web">
		<span class="my_animation">L</span>
		<!--<span class="my_animation">O</span>
		<span class="my_animation">A</span>
		<span class="my_animation">D</span>
		<span class="my_animation">N</span>
		<span class="my_animation">G</span>-->
	</div>

	</body>

</html>